<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>components组件测试</title>
		<style type="text/css">
			[refex-cloak] {
				display: none;
			}

			.area {
				padding: 10px;
				border-bottom: 1px solid #ddd;
			}

			.my-component {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px;
				background-color: #333;
				color: #fff;
				font-size: 14px;
			}

			.btn {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				padding: 6px 12px;
				appearance: none;
				border: 1px solid #ddd;
				border-radius: 4px;
				color: #333;
				font-size: 14px;
				background-color: #fff;
				cursor: pointer;
			}

			.btn-primary {
				background-color: #109a82;
				color: #fff;
			}

			.btns>.btn+.btn {
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app" refex-cloak>
			<div class="area">
				<div>使用HTML字符串实现自定义组件</div>
				<my-component>
					<div>1</div>
					<div>2</div>
				</my-component>
			</div>
			<div class="area">
				<div>使用h函数实现自定义组件</div>
				<my-button primary="{{primary}}" #click="primary=!primary"></my-button>
			</div>
			<div class="area">
				<div>HTML字符串实现自定义组件内部嵌套</div>
				<my-buttons primary="{{primary}}"></my-buttons>
			</div>
			<div class="area">
				<div>h函数实现自定义组件内部嵌套</div>
				<my-btns primary="{{primary}}"></my-btns>
			</div>
			<div class="area">
				<div>component内部组件</div>
				<component name="my-buttons" props="{{ {primary:primary} }}"></component>
			</div>
			<div class="area">
				<button #click="change">点击改变primary的值</button>
			</div>
		</div>
	</body>
	<script src="../dist/refex.js" type="text/javascript" charset="utf-8"></script>
	<script>
		//引入必要的方法
		const {
			proxy,
			useProxy,
			h
		} = Refex
		//构建响应式数据
		const state = proxy({
			primary: false,
			change: function() {
				this.primary = !this.primary
			}
		})
		//拿到可直接操作的响应式对象
		const snap = useProxy(state)

		state.component('my-component', {
			render: function(props) {
				return `<div class="my-component"><div><slot>333</slot></div></div>`
			}
		})

		state.component('my-button', {
			props: ['primary'],
			render: function(props) {
				return h('button', {
					classes: {
						btn: true,
						'btn-primary': props.primary
					},
					text: 'Button'
				})
			}
		})

		state.component('my-buttons', {
			props: ['primary'],
			render: function(props) {
				return `<div class="btns"><my-button primary="{{${props.primary}}}"></my-button><my-button primary="{{${props.primary}}}"></my-button><my-button primary="{{${props.primary}}}"></my-button><my-button primary="{{${props.primary}}}"></my-button></div>`
			}
		})

		const btn = state.component('my-button')
		state.component('my-btns', {
			props: ['primary'],
			render: function(props) {
				return h('div', {
					classes: ['btns'],
					slots: [
						btn.render(props),
						btn.render(props),
						btn.render(props),
						h('button', {
							attrs: {
								type: 'submit'
							},
							classes: {
								btn: true
							},
							text: 'Button2'
						})
					]
				})
			}
		})

		//挂载
		state.mount('#app')
	</script>
</html>
